import type { AntdLocaleType } from '@/locales/antd-locale';
import { antdLocales } from '@/locales/antd-locale';
import type { ElementLocaleType } from '@/locales/element-locale';
import { elementLocales } from '@/locales/element-locale';
import { defineStore } from 'pinia';
import { ref, watch } from 'vue';

export type LocaleType = AntdLocaleType | ElementLocaleType;

export const useLocaleStore = defineStore(
  'locale',
  () => {
    // 当前语言
    const currentLocale = ref<LocaleType>('zh-CN');

    // 语言选项
    const localeOptions = [
      { label: '简体中文', value: 'zh-CN' as LocaleType },
      { label: 'English', value: 'en-US' as LocaleType },
    ];

    // 初始化语言
    const initLocale = () => {
      // 如果没有持久化数据，检测浏览器语言偏好
      if (currentLocale.value === 'zh-CN') {
        if (typeof globalThis !== 'undefined' && globalThis.navigator) {
          const browserLang = globalThis.navigator.language || globalThis.navigator.languages?.[0] || 'zh-CN';
          if (browserLang.startsWith('en')) {
            currentLocale.value = 'en-US';
          }
        }
      }
    };

    // 切换语言
    const changeLocale = (locale: LocaleType) => {
      currentLocale.value = locale;
    };

    // 获取Ant Design Vue的语言包
    const getAntdLocale = () => {
      return antdLocales[currentLocale.value];
    };

    // 获取Element Plus的语言包
    const getElementLocale = () => {
      return elementLocales[currentLocale.value];
    };

    // 获取当前语言显示名称
    const getCurrentLocaleName = () => {
      const option = localeOptions.find((item) => item.value === currentLocale.value);
      return option?.label || '简体中文';
    };

    // 监听语言变化
    watch(
      currentLocale,
      () => {
        // 语言切换的副作用，比如更新页面标题等
        updatePageTitle();
      },
      { immediate: false },
    );

    // 更新页面标题
    const updatePageTitle = () => {
      if (typeof globalThis !== 'undefined' && globalThis.document) {
        const titleMap = {
          'zh-CN': 'Vue 3测试应用',
          'en-US': 'Vue 3 Test App',
        };
        globalThis.document.title = titleMap[currentLocale.value as keyof typeof titleMap] || titleMap['zh-CN'];
      }
    };

    // 获取文本翻译
    const t = (key: string) => {
      const translations: Record<string, Record<LocaleType, string>> = {
        'app.title': {
          'zh-CN': 'Vue 3测试应用',
          'en-US': 'Vue 3 Test App',
        },
        'nav.home': {
          'zh-CN': '首页',
          'en-US': 'Home',
        },
        'nav.element-form': {
          'zh-CN': 'Element Plus表单',
          'en-US': 'Element Plus Form',
        },
        'nav.ant-form': {
          'zh-CN': 'Ant Design表单',
          'en-US': 'Ant Design Form',
        },
        'theme.light': {
          'zh-CN': '切换到亮色模式',
          'en-US': 'Switch to light mode',
        },
        'theme.dark': {
          'zh-CN': '切换到暗色模式',
          'en-US': 'Switch to dark mode',
        },
        'common.submit': {
          'zh-CN': '提交表单',
          'en-US': 'Submit Form',
        },
        'common.reset': {
          'zh-CN': '重置表单',
          'en-US': 'Reset Form',
        },
        'common.preview': {
          'zh-CN': '预览数据',
          'en-US': 'Preview Data',
        },
      };

      return translations[key]?.[currentLocale.value] || key;
    };

    return {
      currentLocale,
      localeOptions,
      initLocale,
      changeLocale,
      getAntdLocale,
      getElementLocale,
      getCurrentLocaleName,
      updatePageTitle,
      t,
    };
  },
  {
    persist: {
      key: 'app-locale',
      storage: typeof globalThis !== 'undefined' ? globalThis.localStorage : undefined,
    },
  },
);
